
import React,{ Component } from 'react';
import { DatePicker, Form,Button,Input } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const FormItem = Form.Item;
//DatePicker 日期选择框 输入或者选择日期的控件
//何时使用 当用户输入一个日期，可以点击标准输入框，弹出日期面进行选择。


class Date extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    handleSubmit(e) {
        e.preventDefault();
        console.log('提交！');
        this.props.form.validateFields((err,values)=>{
            console.log('错误是什么',err);
            if(err) {
                //return;
            }
        })
    }
    handleChange(date,dateString) {
        console.log('date',date);
        //得到
        console.log('dateString',dateString);
    }
    // checkAccount(rule,value,callback) {
       
    //     //const form = this.props.form;
    //     let fieldMobileReg510 = /^$|^([0-9]{5,10})$/;
    //     let FieldMobileReg11 = /^$|^((11|12|13|14|15|16|17|18)+\d{9})$/;
    //     if (value && value.length < 11 && fieldMobileReg510.test(value)) {
    //         callback();
    //     } else if(value.length === 11 && FieldMobileReg11.test(value)){
    //         callback();
    //     }else{
    //         callback("请您输入5-11号码");
    //     }


    // };
    checkFieldsNum = (rule, value, callback) => {
        console.log('value',value);
        const form = this.props.form;
        let regNumber = /^$|^\d+(\.[0-9]{1,10})?$/;
        if (value!==undefined && !regNumber.test(value)) {
            callback("请输入数值");
        }else{
            callback();
        }
    };
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <Form  onSubmit={this.handleSubmit.bind(this)}>
                
                <FormItem>
                    {
                        getFieldDecorator('input_phone',{
                            validateTrigger: [ 'onBlur'],
                            rules: [
                                { required: true, message: '必填项，请填写' },
                                { validator: this.checkFieldsNum }
                            ],
                        })(
                            <Input
                                placeholder="请输入数值：" 
                                style={{ width: '30%'}}
                            />
                        )
                    }
                </FormItem>
                <FormItem>
                    {
                        getFieldDecorator('select_time',{
                            initialValue:'',
                            validateTrigger: [ 'onBlur'],
                            rules: [
                                { required: true, message: '请选择日期时间!' }
                            ],
                        })(
                            <DatePicker onChange={ this.handleChange.bind(this)} />
                        )
                    }
                </FormItem>
                <br />
                <MonthPicker onChange={ this.handleChange.bind(this)} placeholder="请选择月"/>
                <br />
                <RangePicker onChange={ this.handleChange.bind(this)} />
                <br />
                <WeekPicker onChange={ this.handleChange.bind(this)} placeholder="请选择周" />
                <FormItem
                  wrapperCol={{
                    xs: { span: 24, offset: 0 },
                    sm: { span: 16, offset: 8 },
                  }}
                >
                  <Button type="primary" htmlType="submit">Submit</Button>
                </FormItem>
            </Form>
        )
    }

}

export default Date = Form.create()(Date);;